<template>
  	<div id="living">
		<div class="box">
         
        </div>
		<div class='head'>
			<div>
				<img v-for='(val,index) in imgList' :key='index' :src="val" width='30' height='30' alt="">
				<span>26人</span>
			</div>
		</div>
		<div class='footer'>
			<div>
				<img @click='goBack' src="../../image/icon_shut_down.png" width='36' alt="">
			</div>
			<div>
				<div><img @click="" src="../../image/icon_photos.png" width='36' alt=""></div>
				<div><img @click='goBack' src="../../image/icon_return1.png" width='36' alt=""></div>
				<div><img class='aa' src="../../image/icon_flash_normal.png" width='36' alt=""></div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				imgList: [require('@/img/1.jpg'),require('@/img/1512.jpg'),require('@/img/33.jpg')],
			}
		},
		components: {
			
		},
		filters: {
			
		},
		methods: {	
			goBack() {
				this.$router.back();
            },
            showVideo() {
                $('#video').show();
            },
            initVideo() {
                const vdourl = 'http://192.168.0.149:8080/t/tmp/hls/123.m3u8';
                var videoObject = {
                    container: '#video', //容器的ID或className
                    variable: 'player', //播放函数名称
                    loaded: 'loadedHandler', //当播放器加载后执行的函数
                    loop: false, //播放结束是否循环播放
                    autoplay: true, //是否自动播放
                    poster: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1516874998976&di=097200de670dd806e9a9016251be2eab&imgtype=jpg&src=http%3A%2F%2Fimg2.imgtn.bdimg.com%2Fit%2Fu%3D1291397622%2C1318481737%26fm%3D214%26gp%3D0.jpg', //封面图片
                    config: '', //指定配置函数
                    debug: true, //是否开启调试模式
                    drag: 'start', //拖动的属性
                    seek: 0, //默认跳转的时间
                    mobileCkControls:true,//是否在移动端（包括ios）环境中显示控制栏
                    live:true,//是否是直播视频，true=直播，false=点播
                    // video: 'http://192.168.0.149:8080/t/tmp/hls/123.m3u8',
                    video: vdourl,
                };
                // const vdourl = 'http://192.168.0.149/hls/11.m3u8';
                if(vdourl) {
                    console.log(vdourl);
                    var player = new ckplayer(videoObject);
                }
                function loadedHandler() {
                    player.addListener('error', errorHandler); //监听视频加载出错
                    player.addListener('loadedmetadata', loadedMetaDataHandler); //监听元数据
                    player.addListener('duration', durationHandler); //监听播放时间
                    player.addListener('time', timeHandler); //监听播放时间
                    player.addListener('play', playHandler); //监听暂停播放
                    player.addListener('pause', pauseHandler); //监听暂停播放
                    player.addListener('buffer', bufferHandler); //监听缓冲状态
                    player.addListener('seek', seekHandler); //监听跳转播放完成
                    player.addListener('seekTime', seekTimeHandler); //监听跳转播放完成
                    player.addListener('volume', volumeChangeHandler); //监听音量改变
                    player.addListener('full', fullHandler); //监听全屏/非全屏切换
                    player.addListener('ended', endedHandler); //监听播放结束
                    player.addListener('frontAd', frontAdHandler); //监听前置广告的动作
                    player.addListener('wheel', wheelHandler); //监听视频放大缩小
                    player.addListener('controlBar', controlBarHandler); //监听控制栏显示隐藏事件
                    player.addListener('clickEvent', clickEventHandler); //监听点击事件
                    player.addListener('definitionChange', definitionChangeHandler); //监听清晰度切换事件
                    player.addListener('speed', speedHandler); //监听加载速度
                }
                function errorHandler() {
                    console.log('出错')
                    changeText('.playerstate', '状态：视频加载错误，停止执行其它动作，等待其它操作');
                }

                function loadedMetaDataHandler() {
                    var metaData = player.getMetaDate();
                    var html = ''
                    //console.log(metaData);
                    if(parseInt(metaData['videoWidth']) > 0) {
                        changeText('.playerstate', '状态：获取到元数据信息，如果数据错误，可以使用延迟获取');
                        html += '总时间：' + metaData['duration'] + '秒，';
                        html += '音量：' + metaData['volume'] + '（范围0-1），';
                        html += '播放器的宽度：' + metaData['width'] + 'px，';
                        html += '播放器的高度：' + metaData['height'] + 'px，';
                        html += '视频宽度：' + metaData['videoWidth'] + 'px，';
                        html += '视频高度：' + metaData['videoHeight'] + 'px，';
                        html += '视频原始宽度：' + metaData['streamWidth'] + 'px，';
                        html += '视频原始高度：' + metaData['streamHeight'] + 'px，';
                        html += '是否暂停状态：' + metaData['paused'];
                    } else {
                        changeText('.playerstate', '状态：未正确获取到元数据信息');
                        html = '没有获取到元数据';
                    }
                    changeText('.metadata', html);
                }
                function playHandler() {
                    //player.animateResume();//继续播放所有弹幕
                    changeText('.playstate', getHtml('.playstate') + ' 播放');
                    window.setTimeout(function() {
                        loadedMetaDataHandler();
                    }, 1000);
                    loadedMetaDataHandler();
                }	
                function seekHandler(state) {
                    changeText('.seekstate', getHtml('.seekstate') + ' ' + state);
                }

                function seekTimeHandler(time) {
                    changeText('.seekstate', getHtml('.seekstate') + ' seekTime:' + time);
                }
                function bufferHandler(buffer) {
                    //console.log(buffer);
                    changeText('.bufferstate', '缓冲：' + buffer);
                }

                function volumeChangeHandler(vol) {
                    changeText('.volumechangestate', '当前音量：' + vol);
                }
                function speedHandler(n) {
                    changeText('.speed', '当前加载速率：' + n);
                }

                function fullHandler(b) {
                    if(b) {
                        html = ' 全屏';
                    } else {
                        html = ' 否';
                    }
                    changeText('.fullstate', getHtml('.fullstate') + html);
                    
                }

                function endedHandler() {
                    changeText('.endedstate', '播放结束');
                }
                function frontAdHandler(status) {
                    changeText('.frontad', getHtml('.frontad') + ' ' + status);
                }
                var zoomNow = 1;

                function wheelHandler(n) {
                    if(n > 0) {
                        if(zoomNow < 5) {
                            zoomNow += 0.1;
                        }
                    } else {
                        if(zoomNow > 0) {
                            zoomNow -= 0.1;
                        }
                    }
                    player.videoZoom(zoomNow);//支持鼠标滚轮控制放大缩小
                }
                function controlBarHandler(show){
                    if(show) {
                        html = ' 显示';
                    } else {
                        html = ' 隐藏';
                    }
                    changeText('.controlBar', getHtml('.controlBar') + html);
                }
                function clickEventHandler(eve){
                    changeText('.clickEvent', getHtml('.clickEvent') + ' '+eve);
                }
                function definitionChangeHandler(num){
                    changeText('.definitionChange', getHtml('.definitionChange') + ',切换清晰度编号'+num);
                }
                var videoChangeNum = 0;

                function seekTime() {
                    var time = parseInt(player.getByElement('.seektime').value);
                    var metaData = player.getMetaDate();
                    var duration = metaData['duration'];
                    if(time < 0) {
                        alert('请填写大于0的数字');
                        return;
                    }
                    if(time > duration) {
                        alert('请填写小于' + duration + '的数字');
                        return;
                    }
                    player.videoSeek(time);
                }

                
                function newVideo() {
                    var videoUrl = 'http://www.flashls.org/playlists/test_001/stream_1000k_48k_640x360.m3u8';
                    changeVideo(videoUrl);
                }

                function changeVideo(videoUrl) {
                    if(player == null) {
                        return;
                    }
                    var newVideoObject = {
                        container: '#video_living', //容器的ID
                        variable: 'player',
                        autoplay: true, //是否自动播放
                        loaded: 'loadedHandler', //当播放器加载后执行的函数
                        video: videoUrl
                    }
                    //判断是需要重新加载播放器还是直接换新地址
                    if(player.playerType == 'html5video') {
                        if(player.getFileExt(videoUrl) == '.flv' || player.getFileExt(videoUrl) == '.m3u8' || player.getFileExt(videoUrl) == '.f4v' || videoUrl.substr(0, 4) == 'rtmp') {
                            player.removeChild();
                            player = null;
                            player = new ckplayer();
                            player.embed(newVideoObject);
                        } else {
                            player.newVideo(newVideoObject);
                        }
                    } else {
                        if(player.getFileExt(videoUrl) == '.mp4' || player.getFileExt(videoUrl) == '.webm' || player.getFileExt(videoUrl) == '.ogg') {
                            player = null;
                            player = new ckplayer();
                            player.embed(newVideoObject);
                        } else {
                            player.newVideo(newVideoObject);
                        }
                    }
                }

                function changeText(div, text) {
                    player.getByElement(div).innerHTML = text;
                }

                function getHtml(div) {
                    return player.getByElement(div).innerHTML;
                }
                var zoom = 1;
            },
		},
		created() {
            // this.showVideo();
            // this.initVideo();
		},
		mounted() {
            this.showVideo();
            this.initVideo();
        },
        //离开路由触发
        beforeRouteLeave(to,from,next){//记录离开时的位置
            $('#video').hide();
            next();
        },
    }
    
   
</script>
<style lang="scss">
    #video {
        position: absolute !important;
        z-index: 1;
        left: 0;
        top: 0px;
        /* top: 50%; */
        /* bottom: 60px; */
        /* transform: translateY(-50%); */
        width: 100%; 
        height: 300px;
        /* height: calc(100% - 200px);  */
    }
    .pausecenter {
        top: 50%!important;
        left: 50%!important;
        transform: translate(-50%,calc(-50% - 10px))!important;
    }
</style>
